<template>
	<view class="container-bg">
		<u-navbar leftIcon="" placeholder bgColor="#F6F7FB">
			<template #left>
				<view class="font-50 font-w-500 my-font">九州超市</view>
			</template>
			<template #right>
				<image @click="hanldeMyInfo" class="set" src="../../static/shop/setting.png" mode=""></image>
			</template>
		</u-navbar>
		<view class="user-info ">
			<view class="user-top centerY">
				<view class="avatar-box">
					<image v-if="isLogin" class="avatar" :src="info.avatar" mode="aspectFill"></image>
					<image v-else class="avatar" src="../../static/image/avatar.png" mode="aspectFill"></image>
				</view>

				<view class="centerY flex-w betweenX" v-if="isLogin">
					<view class="mar-left-32">
						<view class="font-36 centerY">
							<view class="multi1">{{info.nickname}}</view>
						</view>
						<view class="color-grey mar-top-10 font-28">{{info.tel}}</view>
					</view>
					<view @click="hanldeMyInfo"
						class="centerXY set pad-left-right-10 pad-top-bottom-6 shrink mar-left-10">
					</view>
				</view>
				<view v-else @click="hanldeLogin" class="mar-left-32 login-right centerY flex-w font-30">请登录</view>
			</view>
		</view>

		<!-- 我的订单 -->

		<view class="order-cell bg-white mar-top-40 pad-30">
			<view class="font-32 betweenX" @click="hanldeOrder(0)">
				<view>我的订单</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="centerXY mar-top-50">
				<view class="flex-w centerXY columnY" @click="hanldeOrder(1)">
					<view class="image-box centerXY">
						<image src="../../static/shop/deliver.png"></image>
					</view>
					<view class="font-28 text-center mar-top-20">已完成</view>
				</view>
				<view class="flex-w centerXY columnY" @click="hanldeOrder(2)">
					<view class="image-box centerXY">
						<image src="../../static/shop/wallet.png"></image>
					</view>
					<view class="font-28 text-center mar-top-20">待支付</view>
				</view>
				<view class="flex-w centerXY columnY" @click="hanldeOrder(4)">
					<view class="image-box centerXY">
						<image src="../../static/shop/setUp.png"></image>
					</view>
					<view class="font-28 text-center mar-top-20">已取消</view>
				</view>
			</view>
		</view>

		<!-- cell -->
		<view class="bg-white cell mar-top-20" v-for="(item,index) in cellList" :key="index"
			v-if="collection_inlet == 1">
			<u-cell @click="hanldeCell(info.url)" v-for="(info,inx) in item" :iconStyle="iconStyle" :key="inx"
				:rightIconStyle="rightIconStyle" :icon="info.icon" :border="item.length == (inx+1) ? false :  true "
				:title="info.title" isLink></u-cell>
		</view>
		
		<view class="bg-white cell mar-top-20" v-for="(item,index) in cellList" :key="index">
			<u-cell @click="hanldeCell(info.url)" v-for="(info,inx) in item" :iconStyle="iconStyle" :key="inx"
				:rightIconStyle="rightIconStyle" :icon="info.icon" :border="item.length == (inx+1) ? false :  true "
				:title="info.title" isLink></u-cell>
		</view>

		<my-popup content="您还未登录,是否立即登录？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeLogin"></my-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		baseInfo,
		realNameAuthInfo,
		configIndex
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 当前页面
				routePath: '/pages/shopmall/my',
				// 信息
				info: {},
				// 去登录状态
				isPopup: false,
				isLogin: uni.getStorageSync('token'),
				// cell
				cellList: [
					[{
						title: '我的地址',
						icon: '',
						url: "/pages/address/list",
					},
					],
				],
				// 实名认证
				authInfo: {},
				// 右边 icon 样式
				rightIconStyle: {
					fontSize: '32rpx'
				},
				// icon 样式
				iconStyle: {
					width: '48rpx',
					height: '48rpx',
					marginRight: '20rpx'
				},
				// 是否开启数字入口
				collection_inlet: 0
			}
		},
		watch: {
			isLogin(newVal, oleval) {
				this.isLogin = uni.getStorageSync('token');
			}
		},
		onLoad() {
			// 页面初始化
			configIndex({
				code_arr: ['collection_inlet'],
			}).then(res => {
				this.collection_inlet = res.data.collection_inlet;
			})
		},
		onShow() {
			this.isLogin = uni.getStorageSync('token');
			// 判断是否登录
			if (uni.getStorageSync('token')) {
				this.getBaseInfo();
			}
				
			// tabBar
			this.$base.shopTabBar();
		},
		methods: {
			// 我的订单
			hanldeOrder(current) {
				uni.navigateTo({
					url: '/pages/shopmall/orderList?current=' + current
				})
			},
			// 跳转个人设置
			hanldeMyInfo() {
				uni.navigateTo({
					url: '/pages/my/info'
				})
			},
			// 跳转cell页面
			hanldeCell(url) {
				if (url) {
					uni.setStorageSync('path', this.routePath);
					uni.navigateTo({
						url: url
					})
				} else {
					uni.$u.toast('暂未开放')
				}
			},
			// 去登录
			hanldeLogin() {
				this.isPopup = false;
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
			// 获取用户信息
			getBaseInfo() {
				baseInfo().then(res => {
					this.info = res.data.info;
				})

				// 权限信息
				realNameAuthInfo().then(res => {
					this.authInfo = res.data.info;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-bg {
		padding: 20rpx 26rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background: $uni-bg-page;

		::v-deep .u-cell {
			margin-left: 30rpx;
		}

		::v-deep .u-cell__body {
			padding: 30rpx 30rpx 30rpx 0;
		}

		.avatar-box {
			border: 2rpx solid #fff;
			border-radius: 50%;
		}

		.set {
			flex-shrink: 0;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.order-cell {
		color: #071F4C;

		.image-box {
			width: 100rpx;
			height: 100rpx;
			background: $uni-bg-color;
			border-radius: 50%;

			image {
				display: block;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.user-info {
		.avatar {
			display: block;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}

		.login-right {
			height: 128rpx;
		}

		.auth-box {
			background: rgba(89, 142, 255, .2);
			border-radius: 32rpx;

			.auth {
				display: block;
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
</style>